module.exports = {
  purge: ["./src/**/*.tsx", "./src/**/*.ts"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      default: "#333",
      transparent: "transparent",
      black: "#000",
      white: "#fff",
      orange: {
        100: "#ffede5",
        400: "#ff4e00",
        700: "#f6564d",
        fff7f0: "#fff7f0",
      },
      red: {
        defalut: "#f5222d",
      },
      green: {
        100: "#e5faf5",
        600: "#5dd284",
        900: "#0c9",
      },
      blue: {
        default: "#1890ff",
        f7fcff: "#f7fcff",
        acd7ff: "#acd7ff",
        effaff: "#effaff",
        500: "#54c1f2",
      },
      grey: {
        0: "#f0f2f5",
        100: "#f3f6f8",
        200: "#eee",
        300: "#ccc",
        400: "#aaa",
        600: "#848c97",
        800: "#5b6168",
        850: "#3e3f43",
        900: "#343435",
        fbfbfb: "#fbfbfb",
        e7f7ff: "#e7f7ff",
      },
      yellow: {
        200: "#ffb443",
      },
    },
    spacing: {
      px: "1px",
      0: "0",
      1: "1px",
      2: "2px",
      3: "3px",
      4: "4px",
      5: "5px",
      6: "6px",
      8: "8px",
      10: "10px",
      12: "12px",
      13: "13px",
      14: "14px",
      16: "16px",
      18: "18px",
      20: "20px",
      22: "22px",
      24: "24px",
      26: "26px",
      28: "28px",
      30: "30px",
      32: "32px",
      34: "34px",
      36: "36px",
      38: "38px",
      40: "40px",
      42: "42px",
      44: "44px",
      46: "46px",
      48: "48px",
      50: "50px",
      52: "52px",
      54: "54px",
      56: "56px",
      60: "60px",
      64: "64px",
      66: "66px",
      70: "70px",
      72: "72px",
      80: "80px",
      88: "88px",
      90: "90px",
      100: "100px",
      106: "106px",
      110: "110px",
      120: "120px",
      128: "128px",
      140: "140px",
      160: "160px",
      180: "180px",
      200: "200px",
      220: "220px",
      240: "240px",
      260: "260px",
      280: "280px",
      300: "300px",
      320: "320px",
      340: "340px",
      360: "360px",
      400: "400px",
      450: "450px",
      530: "530px",
      568: "568px",
      634: "634px",
      658: "658px",
    },
    backgroundColor: theme => theme("colors"),
    borderColor: theme => ({
      ...theme("colors"),
      default: theme("colors.gray.aaa", "currentColor"),
    }),
    borderRadius: {
      none: "0",
      2: "2px",
      sm: "4px",
      md: "8px",
      lg: "16px",
      xl: "32px",
      round: "50%",
      full: "9999px",
    },
    borderWidth: {
      default: "2px",
      0: "0",
      1: "1px",
      2: "2px",
      4: "4px",
      6: "6px",
      8: "8px",
    },

    fontFamily: {
      body: [
        "Source Han Sans CN",
        "WenQuanYi Micro Hei",
        "Helvetica Neue",
        "Helvetica, Arial",
        "Hiragino Sans GB",
        "Hiragino Sans GB W3",
        "sans-serif",
      ],
    },
    fontSize: {
      xs: ["12px", { lineHeight: "14px" }],
      13: ["13px", { lineHeight: "15px" }],
      sm: ["14px", { lineHeight: "16px" }],
      base: ["16px", { lineHeight: "18px" }],
      lg: ["18px", { lineHeight: "20px" }],
      xl: ["20px", { lineHeight: "22px" }],
      "2xl": ["22px", { lineHeight: "24px" }],
      "3xl": ["24px", { lineHeight: "26px" }],
      "4xl": ["26px", { lineHeight: "28px" }],
      "5xl": ["28px", { lineHeight: "30px" }],
      "6xl": ["30px", { lineHeight: "32px" }],
      "7xl": ["32px", { lineHeight: "34px" }],
      "8xl": ["34px", { lineHeight: "36px" }],
      "9xl": ["36px", { lineHeight: "38px" }],
      "1xxl": ["38px", { lineHeight: "40px" }],
      "2xxl": ["40px", { lineHeight: "42px" }],
      "3xxl": ["42px", { lineHeight: "44px" }],
      "4xxl": ["44px", { lineHeight: "46px" }],
      "5xxl": ["46px", { lineHeight: "48px" }],
      "6xxl": ["48px", { lineHeight: "50px" }],
      "7xxl": ["50px", { lineHeight: "52px" }],
      "8xxl": ["56px", { lineHeight: "58px" }],
      "9xxl": ["60px", { lineHeight: "62px" }],
    },
    letterSpacing: {
      tighter: "-2px",
      tight: "-4px",
      normal: "0",
      wide: "2px",
      wider: "4px",
      widest: "6px",
    },
    lineHeight: {
      none: "1",
      tight: "1.25",
      snug: "1.375",
      normal: "1.5",
      relaxed: "1.625",
      loose: "2",
      3: "14px",
      4: "16px",
      5: "18px",
      6: "20px",
      7: "24px",
      8: "28px",
      9: "32px",
      10: "36px",
      11: "40px",
      12: "44px",
      13: "64px",
      14: "68px",
    },
    minWidth: {
      50: "50px",
      60: "60px",
      71: "71px",
      105: "105px",
      580: "580px",
      1300: "1300px",
      1330: "1330px",
    },
    maxWidth: {
      50: "50px",
      60: "60px",
      71: "71px",
      105: "105px",
      530: "530px",
      580: "580px",
      1230: "1230px",
    },
    minHeight: {
      47: "47px",
      160: "160px",
      250: "250px",
      650: "650px",
      unset: "unset",
    },
    maxHeight: {
      47: "47px",
      66: "66px",
      68: "68px",
      160: "160px",
      250: "250px",
      650: "650px",
      unset: "unset",
    },
    padding: theme => theme("spacing"),
    placeholderColor: theme => theme("colors"),
    placeholderOpacity: theme => theme("opacity"),
  },
  extend: {
    zIndex: {
      60: "60",
      70: "70",
      80: "80",
      90: "90",
      100: "100",
      9999: "9999",
    },
  },

  corePlugins: {
    boxShadow: false,
    stroke: false,
    strokeWidth: false,
  },
};
